<template>
  <div class="wrapper">
    <div class="report-title">
    <span class="title">{{$t('reportTool.deptMonthProjectSynthesis.reportView')}}</span>
    （
    <span>{{$t('reportTool.deptMonthProjectSynthesis.projectTatol')}}：<span class="highlight">{{info.projectSumCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.normalItem')}}：<span class="highlight">{{info.projectNormalCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.delayItem')}}：<span class="highlight">{{info.projectDelayCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.closingItem')}}：<span class="highlight">{{info.projectColsedCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.suspendItem')}}：<span class="highlight">{{info.projectSuspendCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.cancelItem')}}：<span class="highlight">{{info.projectCancelCount || 0}}</span></span>
    <span>{{$t('reportTool.deptMonthProjectSynthesis.allToCurrent')}}：<span class="highlight">{{info.projectCompletedRate || 0}}</span></span>
    ）
    </div>
    <div class="tableContent">
        <project-table :tableData="tableData" :statistical="statistical" :loading="loading"></project-table>
    </div>
  </div>
</template>
<script>
import projectTable from "./projectTable.vue"
export default {
    props: {
      tableData: {
        type: Array,
        default: () => []
      },
      statistical: {
        type: Object,
        default: () => {}
      },
      loading: {
        type: Boolean,
        default: true
      }
    },
    data(){
        return{
          info:{}
        }
    },
    components: {
      projectTable,
    },
    mounted(){
      
    },
    watch:{
      tableData(v1,v2){
        this.tableData = v1;
        console.log(123,this.tableData)
      },
      statistical(v1,v2){
        this.info = v1;
        console.log(456,this.info)
      },
      loading(v1,v2){
        this.loading = v1;
      }
    },
    methods:{
      
    }
}
</script>
<style lang="less" scoped>
.wrapper {
  .report-title{
    padding-top: 10px;
    color: #666;
    font-size: 14px;
    margin-bottom:20px;
    .title{
      color: #333;
    }
    .highlight{
      color: #386BD7;
    }
    >span{
      margin-right:26px;
      &:nth-of-type(1), &:nth-last-of-type(1) {
        margin-right:0;
      }
    }
  }
}
</style>